import React, { useEffect, useState } from 'react';
import { Button, DatePicker, Select, Card, Row, Col, Table, Divider, Input } from 'antd';
import { get } from '../components/axios'
import dayjs from 'dayjs';
import {
  HomeOutlined,
  RedoOutlined,
  SettingFilled,
  SmileOutlined,
  SyncOutlined,
} from '@ant-design/icons';
const { RangePicker } = DatePicker;



const projectColumns = [
  { title: 'ID', dataIndex: '_id', width: 50, render: (text, record, idx) => idx + 1 },
  { title: '状态', dataIndex: 'status' },
  { title: '进度', dataIndex: 'progress' },
  { title: '项目编号', dataIndex: 'projectNumber' },
  { title: '项目名称', dataIndex: 'projectName' },
  { title: '项目类型', dataIndex: 'projectType' },
  { title: '合同编号', dataIndex: 'contractNumber' },
  { title: '关键客户', dataIndex: 'relatedClient' },
  { title: '项目平台', dataIndex: 'projectCategory' },
  { title: '签约人', dataIndex: 'signatory' },
  { title: '项目负责人', dataIndex: 'personInCharge' },
  { title: '项目开始时间', dataIndex: 'projectStartDate' },
  { title: '项目结束时间', dataIndex: 'projectEndDate' },
  { title: '工期天数', dataIndex: 'durationDays' },
  { title: '操作', dataIndex: 'action', render: (a, record) => <a href={`/projects`}>详情</a> },
];


const WorkBench = () => {
  // 项目列表数
  const [projectData, setProjectData] = useState([]);
  const [dateRange, setDateRange] = useState([null, null]);

  // 统计卡片内容动态生成
  const statCards = [
    { title: '项目数量', value: projectData.length, sub: `完成：${projectData.filter(i => i.status === '已完结' || i.status === 'Completed').length}`, icon: '🕒' },
    { title: '阶段数量', value: 5, sub: '完成：4', icon: '📅' },
    { title: '任务数量', value: 7, sub: '完成：5', icon: '📋' },
    { title: '逾期任务', value: 9, sub: '请及时完成任务', icon: '📄' },
    { title: '延误率', value: '3%', sub: '延误任务数量：3', icon: '📄' },
  ];

  // 获取项目数据
  const getProjectList = (range = dateRange) => {
    let params = {};
    if (range[0] && range[1]) {
      params.start = range[0].format('YYYY-MM-DD');
      params.end = range[1].format('YYYY-MM-DD');
    }
    get('home/getProjects', params).then(res => {
      setProjectData(res.data);
    });
  };

  // 按钮快捷区间
  const handleQuickRange = (type) => {
    let start, end = dayjs();
    switch (type) {
      case 'today':
        start = end = dayjs();
        break;
      case 'yesterday':
        start = end = dayjs().subtract(1, 'day');
        break;
      case '7':
        start = dayjs().subtract(6, 'day');
        end = dayjs();
        break;
      case '30':
        start = dayjs().subtract(29, 'day');
        end = dayjs();
        break;
      case 'lastMonth':
        start = dayjs().subtract(1, 'month').startOf('month');
        end = dayjs().subtract(1, 'month').endOf('month');
        break;
      case 'thisMonth':
        start = dayjs().startOf('month');
        end = dayjs().endOf('month');
        break;
      default:
        start = null; end = null;
    }
    setDateRange([start, end]);
    getProjectList([start, end]);
  };

  // 刷新
  const handleRefresh = () => {
    getProjectList();
  };

  // 日期选择器
  const handleRangeChange = (dates) => {
    setDateRange(dates);
    if (dates && dates[0] && dates[1]) {
      getProjectList(dates);
    }
  };

  // 首次加载
  useEffect(() => {
    getProjectList();
    // eslint-disable-next-line
  }, []);


  return (
    <div style={{ background: '#f5f6fa', padding: 24 }}>
      {/* 顶部筛选区 */}
      <Card style={{ marginBottom: 16 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
          <Button onClick={handleRefresh}>
            <RedoOutlined></RedoOutlined>
          </Button>
          <Button onClick={() => handleQuickRange('today')}>今天</Button>
          <Button onClick={() => handleQuickRange('yesterday')}>昨天</Button>
          <Button onClick={() => handleQuickRange('7')}>最近7天</Button>
          <Button onClick={() => handleQuickRange('30')}>最近30天</Button>
          <Button onClick={() => handleQuickRange('lastMonth')}>上月</Button>
          <Button onClick={() => handleQuickRange('thisMonth')}>本月</Button>
          <RangePicker
            style={{ marginLeft: 8 }}
            value={dateRange}
            onChange={handleRangeChange}
          />
          <Select placeholder="负责人" style={{ width: 120, marginLeft: 8 }} />
        </div>
      </Card>

      {/* 统计卡片区 */}
      <Row gutter={16} style={{ marginBottom: 16 }}>
        {statCards.map(card => (
          <Col span={4} key={card.title}>
            <Card>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <span style={{ fontSize: 32 }}>{card.icon}</span>
                <div>
                  <div style={{ fontSize: 18, fontWeight: 600 }}>{card.value}</div>
                  <div style={{ color: '#888', fontSize: 14 }}>{card.title}</div>
                  <div style={{ color: '#aaa', fontSize: 12 }}>{card.sub}</div>
                </div>
              </div>
            </Card>
          </Col>
        ))}
      </Row>

      {/* 项目列表 */}
      <Card title="项目列表" style={{ marginBottom: 16 }}>
        <Table columns={projectColumns} dataSource={projectData} size="small" pagination={false} rowKey="_id" />
      </Card>

      <Row gutter={16}>
        <Col span={12}>
          <Card title="项目阶段">
            {/* 可用 Table 展示项目阶段数据 */}
            <Table columns={projectColumns.slice(0, 8)} dataSource={projectData} size="small" pagination={false} rowKey="_id" />
          </Card>
        </Col>
        <Col span={12}>
          <Card title="项目任务">
            {/* 可用 Table 展示项目任务数据 */}
            <Table columns={projectColumns.slice(0, 8)} dataSource={projectData} size="small" pagination={false} rowKey="_id" />
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default WorkBench;